<template>
	<view>
		<!-- 顶部导航 -->
		<u-navbar :background="background">
			<view class="ft_16 fw-b">
				我的订单
			</view>
		</u-navbar>
		<view class="content">
			<view class="search" style="padding: 10px 15px;">
				<u-search placeholder="搜索订单" height="80" v-model="keyword" bg-color="#ffffff" @custom="con_search"></u-search>
			</view>
			<u-tabs-swiper ref="uTabs" :list="list" :is-scroll="false" bar-height="6" bar-width="150" active-color="#e67920" :current="current" @change="tabsChange" height="90" font-siz="28"></u-tabs-swiper>
			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" :style="{height:scrollHeight + 'px'}">
				<!-- 全部 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="con_2">
							<view class="con_2_1" v-for="(item,index) in allorderList" :key="index" @click="orderDetail(item)">
								<view class="display just_space" style="padding-bottom: 10px;">
										<view class="ft_12 c-999">
											订单编号：{{item.order_no}}
										</view>
										<!-- 非退款订单 -->
										<view class="ft_12 c-999" v-if="item.refund_status==0">
											{{item.delivery_status==0?'待支付':item.delivery_status==6?'订单已取消':item.delivery_status==1?'待发货':item.delivery_status==5?'拼团中':item.delivery_status==2?'待收货':item.delivery_status==3?'已完成':''}}
										</view>
										<view class="ft_12 c-999" v-else>
											售后/退换
										</view>
									</view>
								<view class="p_top_10 shop">
									<view class="display shopinfo">
										<view class="shopimg">
											<image :src="item.image" mode="aspectFill"></image>
										</view>
										<view class="shoptext">
											<view class="">
												<view class="fw-b text_hidden2">{{item.goods_name}}</view>
												<view class="ft_12 c-999 p_top_10">
													{{item.goods_spec}} ×{{item.num}}
												</view>
											</view>
											<view class="ft_14 fw-b" style="text-align: right;">
												<text>￥</text>
												<text class="ft_16">{{item.goods_money}}</text>
											</view>
										</view>
									</view>
								</view>
								<!-- 非退款订单 -->
								<view class="display" style="justify-content: flex-end;" v-if="item.refund_status==0">
									<view class="ft_12 useOf1" v-if="item.delivery_status!=5">
										{{item.delivery_status==0||item.delivery_status==1?'取消订单':item.delivery_status==6?'再次下单':item.delivery_status==2?'再下一单':item.delivery_status==4?'售后详情':item.delivery_status==3?'申请售后':''}}
									</view>
									<view class="ft_12 useOf1" v-if="item.delivery_status==3">
										删除订单
									</view>
									
									<view class="ft_12 useOf" v-if="item.delivery_status==0||item.delivery_status==5||item.delivery_status==2">
										{{item.delivery_status==0?'去支付':item.delivery_status==5?'去分享':item.delivery_status==2?'确认收货':''}}
									</view>
								</view>
								<view class="display" style="justify-content: flex-end;" v-else>
									<view class="ft_12 useOf1">
										售后详情
									</view>
								</view>
								
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 待支付 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="con_2">
							<view class="con_2_1" v-for="(item,index) in dzforderList" :key="index" @click="orderDetail(item)" v-if="item.delivery_status==0">
								<view class="display just_space" style="padding-bottom: 10px;">
										<view class="ft_12 c-999">
											订单编号：{{item.order_no}}
										</view>
										<view class="ft_12 c-999">
											待支付
										</view>
									</view>
								<view class="p_top_10 shop">
									<view class="display shopinfo">
										<view class="shopimg">
											<image :src="item.image" mode="aspectFill"></image>
										</view>
										<view class="shoptext">
											<view class="">
												<view class="fw-b text_hidden2">{{item.goods_name}}</view>
												<view class="ft_12 c-999 p_top_10">
													{{item.goods_spec}} ×{{item.num}}
												</view>
											</view>
											<view class="ft_14 fw-b" style="text-align: right;">
												<text>￥</text>
												<text class="ft_16">{{item.goods_money}}</text>
											</view>
										</view>
									</view>
								</view>
								<view class="display" style="justify-content: flex-end;">
									<view class="ft_12 useOf1">
										取消订单
									</view>
									<view class="ft_12 useOf">
										去支付
									</view>
								</view>
								
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 待发货 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="con_2">
							<view class="con_2_1" v-for="(item,index) in dfhorderList" :key="index" @click="orderDetail(item)" v-if="item.delivery_status==1">
								<view class="display just_space" style="padding-bottom: 10px;">
										<view class="ft_12 c-999">
											订单编号：{{item.order_no}}
										</view>
										<view class="ft_12 c-999">
											待发货
										</view>
									</view>
								<view class="p_top_10 shop">
									<view class="display shopinfo">
										<view class="shopimg">
											<image :src="item.image" mode="aspectFill"></image>
										</view>
										<view class="shoptext">
											<view class="">
												<view class="fw-b text_hidden2">{{item.goods_name}}</view>
												<view class="ft_12 c-999 p_top_10">
													{{item.goods_spec}} ×{{item.num}}
												</view>
											</view>
											<view class="ft_14 fw-b" style="text-align: right;">
												<text>￥</text>
												<text class="ft_16">{{item.goods_money}}</text>
											</view>
										</view>
									</view>
								</view>
								<view class="display" style="justify-content: flex-end;">
									<view class="ft_12 useOf1">
										取消订单
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 待收货 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="con_2">
							<view class="con_2_1" v-for="(item,index) in dshorderList" :key="index" @click="orderDetail(item)" v-if="item.delivery_status==2">
								<view class="display just_space" style="padding-bottom: 10px;">
										<view class="ft_12 c-999">
											订单编号：{{item.order_no}}
										</view>
										<view class="ft_12 c-999">
											待收货
										</view>
									</view>
								<view class="p_top_10 shop">
									<view class="display shopinfo">
										<view class="shopimg">
											<image :src="item.image" mode="aspectFill"></image>
										</view>
										<view class="shoptext">
											<view class="">
												<view class="fw-b text_hidden2">{{item.goods_name}}</view>
												<view class="ft_12 c-999 p_top_10">
													{{item.goods_spec}} ×{{item.num}}
												</view>
											</view>
											<view class="ft_14 fw-b" style="text-align: right;">
												<text>￥</text>
												<text class="ft_16">{{item.goods_money}}</text>
											</view>
										</view>
									</view>
								</view>
								<view class="display" style="justify-content: flex-end;">
									<view class="ft_12 useOf1">
										再下一单
									</view>
									<view class="ft_12 useOf">
										确认收货
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 已完成 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="con_2">
							<view class="con_2_1" v-for="(item,index) in ywcorderList" :key="index" @click="orderDetail(item)">
								<view class="display just_space" style="padding-bottom: 10px;">
									<view class="ft_12 c-999">
										订单编号：{{item.order_no}}
									</view>
									<view class="ft_12 c-999" v-if="item.refund_status==0">
										已完成
									</view>
									<view class="ft_12 c-999" v-else>
										售后/退换
									</view>
								</view>
								<view class="p_top_10 shop">
									<view class="display shopinfo" >
										<view class="shopimg">
											<image :src="item.image" mode="aspectFill"></image>
										</view>
										<view class="shoptext">
											<view class="">
												<view class="fw-b text_hidden2">{{item.goods_name}}</view>
												<view class="ft_12 c-999 p_top_10">
													{{item.goods_spec}} ×{{item.num}}
												</view>
											</view>
											<view class="ft_14 fw-b" style="text-align: right;">
												<text v-if="item.order_type_data==4">积分</text>
												<text v-else>￥</text>
												<text class="ft_16">{{item.goods_money}}</text>
											</view>
										</view>
									</view>
								</view>
								<!-- 非退款订单 -->
								<view class="display" style="justify-content: flex-end;" v-if="item.refund_status==0">
									<view class="ft_12 useOf1">
										申请售后
									</view>
									<view class="ft_12 useOf1">
										删除订单
									</view>
								</view>
								<view class="display" style="justify-content: flex-end;" v-else>
									<view class="ft_12 useOf1">
										售后详情
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				
			</swiper>
			

		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{backgroundColor: '#ffffff',}, //导航栏背景
				list:[
					{
					name: '全部'
					}, 
					{
					name: '待支付'
					}, 
					{
					name: '待发货'
					}, {
					name: '待收货'
					}, {
					name: '已完成',
					},
				],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				scrollHeight:"", //滚动高度
				page:1,//当前页数
				
				keyword:"",//搜索关键字
				
				allorderList:[], //全部订单
				dzforderList:[], //待支付
				dfhorderList:[], //待发货
				dshorderList:[], //待收货
				ywcorderList:[], //已完成
				
			}
		},
		onLoad(e) {
			if(e.type){
				this.current=e.type
				this.swiperCurrent=e.type
			}
			this.getheight() //获取滚动高度
			this.getallorder(1) //获取全部订单
			uni.$on('orderList',res=>{
				this.allorderList=[], //全部订单
				this.dzforderList=[], //待支付
				this.dfhorderList=[], //待发货
				this.dshorderList=[], //待收货
				this.ywcorderList=[], //已完成
				this.getallorder(1) //获取全部订单
			})
		},
		methods: {
			getallorder(page){ //获取全部订单
				let type=['-1','0','1','2','3']  // 全部 未支付 待发货 待收货 已收货 4/已退款
				type.forEach(i=>{
					this.$myRequest('order/OrderList',{
						type:i,page:page,name:this.keyword
					}).then(res=>{
						let data=res.data.data
						data.list.forEach(j=>{
							j.goods_spec=j.goods_spec.replace(/;/g,' ')
						})
						if(res.data.code==1){
							if(i==-1){ //全部订单
								this.allorderList.push(...data.list)
								console.log(data.list);
								if(data.list.length<=0){
									this.$all.toast("没有更多了")
								}
							}else if(i==0){ //待支付
								this.dzforderList.push(...data.list)
								console.log(data.list);
								if(data.list.length<=0){
									this.$all.toast("没有更多了")
								}
							}else if(i==1){ //待发货
								this.dfhorderList.push(...data.list)
								console.log(data.list);
								if(data.list.length<=0){
									this.$all.toast("没有更多了")
								}
							}else if(i==2){//待收货
								this.dshorderList.push(...data.list)
								console.log(data.list);
								if(data.list.length<=0){
									this.$all.toast("没有更多了")
								}
							}else{ //已收货
								this.ywcorderList.push(...data.list)
								console.log(data.list);
								if(data.list.length<=0){
									this.$all.toast("没有更多了")
								}
							}
						}
					})
				})
			},
			
			orderDetail(item){ //订单详情
				console.log(item);
				// return
				uni.navigateTo({
					url:"orderDetail?type="+item.delivery_status+"&orderid="+item.id
				})
			},
			con_search(e){ //确定搜索内容
				console.log(e);
				this.keyword=e
				this.allorderList=[], //全部订单
				this.dzforderList=[], //待支付
				this.dfhorderList=[], //待发货
				this.dshorderList=[], //待收货
				this.ywcorderList=[], //已完成
				this.getallorder(1) //获取全部订单
			},
			
			getheight(){ //获取滚动高度
				let windowHeight=uni.getStorageSync('windowHeight')
				let statusBarHeight=uni.getStorageSync('statusBarHeight')
				this.scrollHeight=windowHeight - statusBarHeight - 104
			},
			
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				// this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				this.page+=1
				console.log(this.page);
				this.getallorder(this.page) 
			},
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fafafa;
}
.content{
	.con_1{
		
	}
	.con_2{
		padding: 10px 0;
		.con_2_1{
			padding: 15px;
			background-color: #FFFFFF;
			border-radius: 5px;
			margin-bottom: 10px;
			.shop{
				border-bottom: 1px solid #eeeeee;border-top: 1px solid #eeeeee;margin-bottom: 10px;
				.shopinfo{
					position: relative;
					padding-bottom: 15px;
					.shopimg{
						width: 200rpx;height: 200rpx;margin-right: 10px;
						image{
							width: 200rpx;height: 200rpx;border-radius: 5px;
						}
					}
					.shoptext{
						display: flex;justify-content: space-between;flex-flow: column;height: 100px;
						width: 100%;
					}
					.shanc{
						width: 32rpx;height: 32rpx;position: absolute;top: 15px;right: 15px;
					}
				}
			}
			
			
			.useOf{
				padding: 8px 0;background: linear-gradient(90deg, #F1A421 0%, #E4741F 100%);color: #FFFFFF;border-radius: 30px;
				width: 80px;
				text-align: center;
				margin-left: 10px;
			}
			.useOf1{
				border: 1px solid #333333;
				padding: 7px 0;border-radius: 30px;
				width: 78px;
				text-align: center;
				margin-left: 10px;
			}
		}
	}
}

</style>
